<template>
  <div class="flex">
    <div class="col-8 flex">
      <Avatar :image="props.userItem.avatar" shape="circle" />
      <span class="ml-2">{{ props.userItem.username }}</span>
    </div>
    <div class="col-4">
      <Button @click="handleAddFriend(props.userItem)" label="添加好友" class="w-full"/>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { TUserModel } from '@/stores/typings/chat';
import { Button, Avatar } from '@/utils/primevue'
import useChatStore from '@/stores/chat'

const chatStore = useChatStore()
type TProps = {
  userItem: TUserModel
}
const props = defineProps<TProps>()

const handleAddFriend = (item: TUserModel) => {
  chatStore.addFriend(item.userId)
}
</script>

<style lang="scss" scoped>

</style>
